<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>如何在scoped 修饰下的style 下层叠第三方组件的样式 | JOE&#39; Blog</title>
    <meta name="generator" content="VuePress 1.5.1">
    <link rel="icon" href="/vuepress-blog/favicon.ico">
    <meta name="description" content="个人博客">
    <meta name="keywords" content="前端博客,joe">
    <link rel="preload" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css" as="style"><link rel="preload" href="/vuepress-blog/assets/js/app.c2c176f8.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/2.cfb39290.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/8.6b7d4a9b.js" as="script"><link rel="prefetch" href="/vuepress-blog/assets/js/10.e6cc7d41.js"><link rel="prefetch" href="/vuepress-blog/assets/js/3.5196b5a8.js"><link rel="prefetch" href="/vuepress-blog/assets/js/4.5159fade.js"><link rel="prefetch" href="/vuepress-blog/assets/js/5.ad0004fd.js"><link rel="prefetch" href="/vuepress-blog/assets/js/6.9d4540a4.js"><link rel="prefetch" href="/vuepress-blog/assets/js/7.0748d6e8.js"><link rel="prefetch" href="/vuepress-blog/assets/js/9.8e98eab6.js">
    <link rel="stylesheet" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-blog/" class="home-link router-link-active"><!----> <span class="site-name">JOE' Blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>如何在scoped 修饰下的style 下层叠第三方组件的样式</span> <!----></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="如何在scoped-修饰下的style-下层叠第三方组件的样式"><a href="#如何在scoped-修饰下的style-下层叠第三方组件的样式" class="header-anchor">#</a> 如何在scoped 修饰下的style 下层叠第三方组件的样式</h1> <h6 id="本文章解决修改element-ui-等包含的第三方-组件-内部-默认的样式-时-，有时候-在-scoped-的style-下-定义样式无法起作用，无法覆盖"><a href="#本文章解决修改element-ui-等包含的第三方-组件-内部-默认的样式-时-，有时候-在-scoped-的style-下-定义样式无法起作用，无法覆盖" class="header-anchor">#</a> .本文章解决修改element-ui 等包含的第三方 组件 内部 默认的样式 时 ，有时候 在 scoped 的style   下 定义样式无法起作用，无法覆盖</h6> <h3 id="问题起因"><a href="#问题起因" class="header-anchor">#</a> 问题起因</h3> <p>在Vue 项目中，我们有时候 会主动修改第三方组件的样式,但发现 对于一些组件，有时候无论我们怎么修改 样式就是无法其效果，或者说无法层叠掉组件库默认的样式 ， 甚至使用  <strong>!import</strong>  都起不了作用，原因在于大多是 情况下，我们 给 vue 文件 的style 节点 添加了<strong>scoped</strong> 属性</p> <ul><li><p>scoped 的原理</p> <p>style 节点 的 scoped  属性，表示 style 内 的 所有 css 样式  旨在当前 组件 有效 ，所以 为了<strong>避免在不同组件下 如果同通过 某一选择器 修饰样式 会对 其他组件 产生层叠</strong>，修饰 ，一般都会 使用scoped 。 在编译.vue文件时，<strong>vue-loader</strong> 会对 style 节点带有scoped 属性的   模板进行处理</p> <p>原理：</p> <p>编译前：</p> <div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hi<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
	<span class="token selector">.example</span> <span class="token punctuation">{</span>
 		 <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>编译后：</p> <div class="language-html extra-class"><pre class="language-html"><code>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>example<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-v-7668812d</span><span class="token punctuation">&gt;</span></span>hi<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
	<span class="token selector">.example[data-v-7668812d]</span> <span class="token punctuation">{</span>
  		<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>vue-loader 会给 标签 添加 <strong>唯一的标识‘</strong>，再 让css 通过  **属性选择器 **  选中当前组件的 模板内的 标签，从而达到 只 再当前 组件起作用的效果</p></li></ul> <h3 id="解决方法-使用-（深度作用选择器）"><a href="#解决方法-使用-（深度作用选择器）" class="header-anchor">#</a> 解决方法-使用&gt;&gt;&gt; （深度作用选择器）</h3> <p>编译前：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.a &gt;&gt;&gt; .b</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>编译后：</p> <div class="language-html extra-class"><pre class="language-html"><code>.a[data-v-f3f3eg9] .b { /* ... */ }
</code></pre></div><p>深度作用选择器   <strong>&gt;&gt;&gt;</strong>  是 <strong>vue-loader</strong> 提供的 功能，作用在于将选择器的 作用 <strong>深入子组件</strong>，</p> <p>当遇到   <strong>&gt;&gt;&gt;</strong>   的时候会将  <strong>&gt;&gt;&gt;</strong>   位置替换成组件的hash值</p> <p>**注意：**有些像 Sass 之类的预处理器无法正确解析 <code>&gt;&gt;&gt;</code>，这种情况下可以使用 <code>/deep/</code> 或 <code>::v-deep</code> 操作符取而代之——两者都是 <code>&gt;&gt;&gt;</code> 的别名，同样可以正常工作</p> <p><a href="/vuepress-blog/article/[https:/vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器](https:/vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器)">vue-loader 官方链接</a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/vuepress-blog/assets/js/app.c2c176f8.js" defer></script><script src="/vuepress-blog/assets/js/2.cfb39290.js" defer></script><script src="/vuepress-blog/assets/js/8.6b7d4a9b.js" defer></script>
  </body>
</html>
